import { _decorator, Label } from 'cc';
import { PanelBase } from '../../Basic/UI/PanelBase';
import { LayerType, SoundCode } from '../../Basic/Config/BaseEnum';
import { List } from '../../Basic/Component/List';
import { RequestUrl, WebRequestHttp } from '../../Basic/Handle/WebRequest';
import { DataMgr, PlayerData } from '../../Basic/Manager/DataManager';
import { PlayerParams } from '../../Basic/Config/DataConfig';
import { MultiPlatform, Platform } from '../../Basic/Model/Platform/MultiPlatform';
import { RankItem } from './RankItem';
import { AudioManager } from '../../Basic/Manager/AudioManager';
import { RankModel } from './RankModel';
const { ccclass, property } = _decorator;

@ccclass('RankPanel')
export class RankPanel extends PanelBase {
  panelLayer: LayerType.DialogLayer = LayerType.DialogLayer;
  @property(List)
  list: List;
  @property(Label)
  page: Label;
  @property(RankItem)
  myRank: RankItem;

  rankIndex: number;
  pageIndex: number;
  protected onEnable(): void {
    // RankModel.Ins().updateRank();
    RankModel.Ins().basePanel = this;
    this.rankIndex = 0;
    this.pageIndex = 0;
    this.requestRankData();
    RankModel.Ins().getRank();
    // this.updateMyRank();
  }

  updateMyRank() {
    const myRank = PlayerData.get(PlayerParams.myRankData);
    console.log(`MyRank`, myRank);
    this.myRank.data = myRank[0];
    this.myRank.dataChanged();
  }

  requestRankData() {
    const data = {
      type: `cake`,
      page: this.rankIndex,
      pagecnt: 20,
    };
    WebRequestHttp.requestGet(RequestUrl.api_url + RequestUrl.LEADERBOARD_PAGE, this.resR(data), this.resqR, this);
  }

  resR(data) {
    const obj = { platform: MultiPlatform.Ins().platform, ...data };
    return obj;
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  resqR(data: any) {
    console.log(data);
    switch (MultiPlatform.Ins().platform) {
      case Platform.tt:
      case Platform.wx:
        if (data?.data?.result) {
          DataMgr.changePlayerAttr(PlayerParams.rankData, data.data.result, true);
        }
        break;
      default:
        if (data?.result) {
          DataMgr.changePlayerAttr(PlayerParams.rankData, data.result, true);
        }
        break;
    }

    this.renderRank();
  }

  /** 渲染排行版 */
  renderRank() {
    const rankData = PlayerData.get(PlayerParams.rankData);
    const data = [];
    // if (rankData.length <= 0) {
    //   for (let i = this.pageIndex * 4; i < this.pageIndex * 4 + 4; i++) {
    //     data.push({});
    //   }
    // } else {
    for (let i = this.pageIndex * 4; i < this.pageIndex * 4 + 4; i++) {
      if (rankData[i] != undefined) {
        data.push(rankData[i]);
      } else {
        data.push({});
      }
    }
    // }
    this.list.setData(data);
    this.list.enabled = true;
    this.page.string = `${this.rankIndex * 5 + this.pageIndex + 1} / 50`;
  }

  onClickBtn(t: Touch, data) {
    const key = data.toString();
    AudioManager.Singleton.playSound(SoundCode.BTN_CLICK);
    switch (key) {
      case 'next':
        if (this.rankIndex + 1 >= 10 && this.pageIndex >= 4) break;
        this.list.enabled = false;
        this.pageIndex++;
        if (this.pageIndex >= 5) {
          this.pageIndex = 0;
          this.rankIndex = this.rankIndex + 1 > 10 ? this.rankIndex : this.rankIndex + 1;
          this.requestRankData();
        } else {
          this.renderRank();
        }
        break;
      case 'last':
        if (this.rankIndex <= 0 && this.pageIndex <= 0) break;
        this.list.enabled = false;
        this.pageIndex--;
        if (this.pageIndex < 0) {
          this.pageIndex = 4;
          this.rankIndex = this.rankIndex - 1 < 0 ? this.rankIndex : this.rankIndex - 1;
          this.requestRankData();
        } else {
          this.renderRank();
        }
        break;
      case 'share':
        MultiPlatform.Ins().platformUnit.shareMessage();
        break;
    }
  }

  protected onDisable(): void {
    this.list.enabled = false;
    RankModel.Ins().basePanel = null;
  }
}
